<template>
  <div class="treeselect" ref="select">
    <div class="treeselect-option" @click="show=!show" :class="{height40:isHeight}">
      <span :class="{fontSize:isHeight}">{{(!select.checkName) ? title : select.checkName}}</span>
      <i class="el-icon-caret-bottom" style="float:right;" :class="{height50:isHeight}"></i>
      <div v-if='displayLine' style="clear:both"></div>
    </div>
    <div class="treeselect-content" v-show="show" :class="{marTop:isHeight}">
      <div>
        <!-- 传入的type 为 1 是多选 -->
        <el-tree v-if="type === 1 " :data="data" show-checkbox node-key="id" :props="children" @check="savenode" ref="treeselect">
        </el-tree>
        <!-- 传入的type 为 2 是单选 -->
        <el-tree v-if="type === 2 " :data="data" show-checkbox node-key="id" :props="children" ref="treeselect"
          @check-change="orgCheckChange" :check-strictly="true">
        </el-tree>
        <div>
          <el-button type="primary" size="mini" class="treeselect-btn" @click="chooseDepartment">确定</el-button>
          <el-button type="default" size="mini" class="treeselect-btn" @click="show = false">取消</el-button>
          <el-button type="default" size="mini" class="treeselect-btn" @click="clearData">清空</el-button>
        </div>
        <div style="clear:both"></div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "treeSelect",
    props: {
      data: {
        type: Array
      },
      type: {
        type: String
      },
      title: {
        type: String
      },
      isHeight: {
        type: String
      },
      displayLine: {
        type: Boolean,
        default: true
      },
      selectdata: {
        type: Array
      }
    },
    data() {
      return {
        show: false,
        select: {
          checkedarray: [],
          currentchecked: {},
          checkName: ''
        },
        children: {
          children: "children",
          label: "name"
        },
        getCheckedKeysName: []
      };
    },
    watch: {
      "$route.name": "fetchData",
      selectdata: {
        handler(val, oldval) {
          this.$refs.treeselect.setCheckedKeys(val);
          let temp = [];
          let that = this;
          setTimeout(function () {
            that.$refs.treeselect.getCheckedNodes(true).forEach(item => {
              temp.push(item.name)
              that.select.checkName = temp.join(',')
            })
          }, 0);
        },
        deep: true
      },
      data: {
        handler(val, oldval) {
          if (this.select.checkedarray.length != 0) {
            this.$refs.treeselect.setCheckedKeys(this.select.checkedarray);
          }
        },
        deep: true
      }
    },
    methods: {
      fetchData() {
        this.select.checkName = ''
        this.$refs.treeselect.getCheckedNodes(true).forEach(item => {
          this.$refs.treeselect.setChecked(item, false);
        });
        this.show = false;
      },
      orgCheckChange(data, checked, indeterminate) {
        this.getCheckedKeysName = [];
        if (this.$refs.treeselect.getNode(data).level !== 4) {
          this.$message({
            message: "请选择栏目",
            type: "error",
            showClose: true
          });
          this.$refs.treeselect.setChecked(data, false);
          return;
        }
        const indexs = this.select.checkedarray.indexOf(data.id);
        if (indexs < 0 && this.select.checkedarray.length === 1 && checked) {
          this.$message({
            message: "只能选择一个栏目",
            type: "error",
            showClose: true
          });
          this.$refs.treeselect.setChecked(data, false);
        } else if (this.select.checkedarray.length === 0 && checked) {
          // this.select.checkedarray = [];
          this.select.checkName = ""
          this.select.checkedarray.push(data.id);
        } else if (
          indexs >= 0 &&
          this.select.checkedarray.length === 1 &&
          !checked
        ) {
          this.select.checkedarray = []
          this.select.checkName = ""
        }
      },
      savenode: function (data, node) {
        if (data !== [] && node !== {}) {
          this.getCheckedKeysName = [];
          this.select.checkedarray = node.checkedKeys;
          this.select.currentchecked = data;
        }else{
          this.getCheckedKeysName = [];
          this.select.checkedarray = [];
          this.select.currentchecked = {};
        }
      },
      clearData() {
        this.select.checkedarray = []
        this.select.checkName = ""
        this.$emit('clearTree', this.select.checkedarray = [], this.select.checkName = "", this.select.currentchecked = {})
      },
      chooseDepartment() {
        if (this.$refs.treeselect.getCheckedNodes(true).length === 0) {
          this.select.checkName = ''
          this.select.checkedarray = [];
        } else {
          this.getCheckedKeysName = []
          this.$refs.treeselect.getCheckedNodes(true).forEach(item => {
            this.getCheckedKeysName.push(item.name)
            this.$refs.treeselect.setChecked(item, false)
          })
          this.select.checkName = this.getCheckedKeysName.join('、')
        }
        this.show = false;
        this.$emit("choose");
      }
    }
  };

</script>

<style scoped>
  .treeselect {
    border: 1px #ddd solid;
    /* margin-bottom: 30px; */
  }

  .treeselect-option {
    height: 30px;
    padding: 0 10px;
  }

  .treeselect-content {
    position: relative;
    max-height: 300px;
    overflow: auto;
  }

  .treeselect-option i,
  span {
    line-height: 30px;
    font-size: 12px;
    color: #c1c5d2;
  }

  .treeselect-option>div {
    border-top: 1px #ddd solid;
  }

  .treeselect-btn {
    margin: 5px !important;
    float: right;
  }

  .height40 {
    height: 38px;
    line-height: 38px;
  }

  .treeselect .treeselect-option .height50 {
    line-height: 38px;
    font-size: 14px;
  }

  .treeselect .treeselect-option .fontSize {
    font-size: 14px;
  }

  .treeselect .treeselect-option span {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 90%;
  }

  .treeselect-option i[data-v-22699ac0],
  span[data-v-22699ac0] {
    line-height: 28px;
  }

  .marTop {
    /* margin-top: 11px; */
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }

</style>
